<template>
  <CommonMenuHeader />
  <div class="main-view">
    <div class="main-view__banner animate__bounceInUp animate__animated">
      <van-swipe :width="349" :height="151" :loop="false">
        <van-swipe-item @click="$router.push('/sweep')">
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/721f5a0453.png?auto=format&dpr=2&w=450"
              width="100%"
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/8986a4f98b.png?auto=format&dpr=2&w=450"
              alt=""
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/d512d9e182.png?auto=format&dpr=2&w=450"
              alt=""
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/8747a27d13.png?auto=format&dpr=2&w=450"
              alt=""
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/cdf9cdcb35.png?auto=format&dpr=2&w=450"
              alt=""
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/18f7e06853.png?auto=format&dpr=2&w=450"
              alt=""
            />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="main-view__banner-img-wrapper">
            <img
              src="https://bc.imgix.net/banner/0c3366f11f.png?auto=format&dpr=2&w=450"
              alt=""
            />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="p-6px animate__bounceInUp animate__animated">
      <WinsList />
    </div>
    <div class="main-view__lottery animate__bounceInUp animate__animated">
      <div class="main-view__lottery-item mt-24px">
        <LotteryTitle :title="$t('title_1')">
          <svg class="icon">
            <use
              xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Slots"
            ></use>
          </svg>
        </LotteryTitle>
        <van-swipe
          :loop="false"
          :width="114"
          :height="138"
          :show-indicators="false"
        >
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/8cfca271-4759-45b4-a578-4052d04cc5a5.png?auto=format&dpr=2&w=200"
              />
              <p>
                <span class="text-text-3">JILI</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/bd0127df-51b9-4254-8af0-1f9ee91e92fd.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">JILI</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/a9b0b139ce.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">FA CHAI</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/79eb6e4b-dc14-4009-804f-1fba312246e1.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">Pramatic Play</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/8f9abf70-5249-4baa-8a12-14df6542c48f.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">JIKLI</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/167a3f8c-2674-452a-868d-211d24cc954a.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">Booongo</span>
              </p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="main-view__lottery-item mt-24px">
        <LotteryTitle :title="$t('title_2')">
          <svg class="icon">
            <use
              xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_HotGame"
            ></use>
          </svg>
        </LotteryTitle>
        <van-swipe
          :loop="false"
          :width="114"
          :height="138"
          :show-indicators="false"
        >
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/ff0b0511-1f48-43d1-8dd3-294bb6437b4b.png?auto=format&dpr=2&w=200"
              />
              <p>
                <span class="text-text-3">BC Originals</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/5071b4fa-e4fe-411f-ac17-36fc4703697c.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">Habanero</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/5b3a4099-9462-4d3c-a854-ade78aad0d60.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">BC Originals</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/79eb6e4b-dc14-4009-804f-1fba312246e1.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">Pramatic Play</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/8f9abf70-5249-4baa-8a12-14df6542c48f.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">JIKLI</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="lottery-item__img-wrapper">
              <img
                src="https://bc.imgix.net/game/image/167a3f8c-2674-452a-868d-211d24cc954a.png?auto=format&dpr=2&w=200"
                alt=""
              />
              <p>
                <span class="text-text-3">Booongo</span>
              </p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <MainDesc />
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Footer from "@/components/footer/index.vue";
import CommonMenuHeader from "@/components/common-header-menu/index.vue";
import LotteryTitle from "./components/lottery-title.vue";
import WinsList from "./components/wins-list.vue";
import MainDesc from "./components/main-desc.vue";

const { t } = useI18n();
const $t = key => {
  return t("home." + key);
}; 
</script>

<style lang="less" scoped>
.main-view {
  &__banner {
    padding: 4px 0 4px 4px;

    &-img-wrapper {
      border-radius: 4px;
      height: 100%;
      padding-right: 12px;
      > img {
        border-radius: 4px;
        width: 100%;
        height: 100%;
      }
    }
  }
  &__btns {
    display: flex;
    padding: 0 14px;
    justify-content: space-between;
  }
  &__btn {
    width: 100px;
    height: 38px;
    > img {
      height: 100%;
      width: 100%;
    }
  }
  &__lottery {
    &-item {
      padding: 0 4px;
      .lottery-item__img-wrapper {
        height: 100%;
        padding-right: 4px;
        font-size: 0;
        > img {
          height: 108px;
          width: 108px;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }
        > p {
          padding: 7px;
          width: 108px;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          background-color: var(--fog-21);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          > span {
            font-size: 12px;
          }
        }
      }
    }
  }
  &__table {
    &-header {
      padding: 15px 29px;
      color: white;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
    &-body {
      .row {
        display: flex;
        color: white;
        justify-content: space-between;
        height: 44px;
        margin: 0 14px;
        border-radius: 8px;
        align-items: center;
        padding: 0 18px;
        margin-bottom: 6px;
        font-size: 12px;
        &-item {
        }
      }
    }
  }
  // &__nav {
  //   display: flex;
  //   overflow: auto;
  //   padding: 10px;
  //   .nav-item {
  //     height: 45px;
  //     padding: 0 10px;
  //     display: flex;
  //     align-items: center;
  //     > svg {
  //       flex-shrink: 0;
  //       height: 18px;
  //       width: 18px;
  //       margin-right: 6px;
  //     }
  //     &--active {
  //       border-radius: 45px;
  //       background: var(--fog-21);
  //     }
  //   }
  // }
}
</style>
